<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
 <div id="app1" style="border: 1px solid black;">
	 <h3>这是 app1 的作用域</h3>
	 <my-component></my-component>
  </div>
  <div id="app2" style="border: 1px solid black;">
  <h3>这是 app2 的作用域</h3>
  <my-component></my-component>
  </div>
  <!-- 注意外部模板内容需要用 template 标签包裹 -->
  <template id="template1">
  <button @click='addCount'>全局组件，被点击次数是{{count}}</button>
  </template>
  <script src="js/vue.js"></script>
 <script>
 // 创建 Vue 实例 app1
   const app1 = new Vue({
   el: '#app1',
   components: {
   // 局部组件，组件名为 my-component
   "my-component": {
   // 通过选择器指向组件的模板
   template: `#template1`,
  // 注意：组件的 data 必须是函数，数据是独立的，不会相互影响
  data() {
   return {
   count: 0
   }
   },
   methods: {
   addCount() {
   this.count++;
   }
   }
   }
   }
   })
   // 创建 Vue 实例 app2，未定义局部组件
   const app2 = new Vue({
   el: '#app2'
   })
   </script>
	</body>
</html>
